<!--A Design by W3layouts 
Author: W3layout
Author URL: http://w3layouts.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
-->
<!DOCTYPE html>
<html>
<head>
<title>千鸟网络O(∩_∩)O哈哈~</title>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery.min.js"></script>
<!-- Custom Theme files -->
<!--theme-style-->
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<!--//theme-style-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Portfolic Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template,
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<!--fonts-->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'><!--//fonts-->
<script type="text/javascript" src="js/move-top.js"></script>
<script type="text/javascript" src="js/easing.js"></script>
<!-- slide -->
<script src="js/responsiveslides.min.js"></script>
  <script>
    // You can also use "$(window).load(function() {"
    $(function () {
      // Slideshow 1
      $("#slider1").responsiveSlides({
         auto: true,
		 nav: true,
		 speed: 500,
		 namespace: "callbacks",
		 pager: true,
      });
    });
  </script>

</head>
<body>
<!--header-->

	<div class="header">
		<div class="header-top">
			<div class="container">
				<div class="top-nav">
					<span class="menu"> </span>
					<ul>
						<li class="active" ><a href="index.html" >主页  </a> </li>
						<li><a href="##" data-hover="关于本站" >关于本站 </a></li>
						<li><a href="##" data-hover=" 功能设置">功能设置</a></li>
						<li><a href="##" data-hover="个人博客"> 个人博客</a></li>
						<li><a href="##" data-hover="后台管理">后台管理 </a></li>

					</ul>
					<!--script-->
				<script>
					$("span.menu").click(function(){
						$(".top-nav ul").slideToggle(500, function(){
						});
					});
			</script>
				</div>


			<div class="header-top-on">
				<ul class="social-in">
					<li><a href="#"><i> </i></a></li>
					<li><a href="#"><i class="tin"> </i></a></li>
					<li><a href="#"><i class="gmail"> </i></a></li>
					<li><a href="#"><i class="dribble"> </i></a></li>
					<li><a href="#"><i class="browser"> </i></a></li>
				</ul>
			</div>
				<div class="clearfix"> </div>
			</div>
		</div>
			<!---->
		<div class="container">
			<div class="header-bottom">
				<div class="logo">
				<a href="index.html"><img src="images/logo.png" alt="" ></a>
			</div>
					<div class="search">
						<form>
							<input type="text" value="Search the site..." onfocus="this.value = '';" onblur="if (this.value == '') {this.value = '';}" >
							<input type="submit" value="">
						</form>
					</div>
			<div class="clearfix"> </div>
		</div>
	</div>
</div>
<!---->
	<div class="container">
	<div class="banner-top">
		<div class="slider">
			<ul class="rslides" id="slider1">
			  <li><img src="images/阿狸.jpg" alt="">
			  </li>
			  <li><img src="images/梦幻西游.jpg" alt="">
			  </li>
			  <li><img src="images/魔兽.jpg" alt="">
			  </li>

		</div>
	</div>
	</div>
	<!--content-->
<div class="content">
	<div class="container">
	<div class="port">
	<h2>“ Welcome to the Plover site for <span>Perfect</span> information network connections ”</h2>
	<ul id="filters">
						<li style="border-left: none;"><span class="filter" data-filter="live taobao single company other is web">All</span><label class="arrow"> </label></li>
						<li><span class="filter" data-filter="live">直播</span><label class="arrow arrow1"></label></li>
						<li><span class="filter" data-filter="taobao">淘宝</span><label class="arrow arrow2 "></label></li>
						<li><span class="filter" data-filter="single">个人网站</span><label class="arrow arrow3"></label></li>
						<li><span class="filter" data-filter="company">企业门户</span><label class="arrow arrow4"></label></li>
						<li><span class="filter" data-filter="other">千奇百链</span><label class="arrow arrow5"></label></li>
						<li><span class="filter" data-filter="is">谁知道呢</span><label class="arrow arrow6"></label></li>
						<div class="clearfix"> </div>
					</ul>

				</div>
					<div id="portfoliolist">
					<div class="portfolio live mix_all" data-cat="live" style="display: inline-block; opacity: 1;">
						<div class="portfolio-wrapper ">
							<a href="single.html">
						    <img class="img-responsive" src="images/pi.jpg" alt=""  />

						</a>
						<div class="gir">
							<h5>陆雪琪</h5>
							<p>一个萌萌的妹子主播</p>
						</div>
						</div>
					</div>
					<div class="portfolio taobao mix_all" data-cat="taobao" style="display: inline-block; opacity: 1;">
						<div class="portfolio-wrapper">
						<a href="single.html">
						<img class="img-responsive" src="images/pi1.jpg" alt=""  />
						</a>
							<div class="gir">
							<h5>冰激凌</h5>
							<p>本店拥有各大优惠，第二杯半价哦</p>
						</div>
		                </div>
					</div>
					<div class="portfolio single mix_all" data-cat="single" style="display: inline-block; opacity: 1;">
						<div class="portfolio-wrapper">
							<a href="single.html">
						     <img class="img-responsive" src="images/pi2.jpg"  alt="" />

						</a>
						<div class="gir">
							<h5>豆豆小屋</h5>
							<p>欢迎光临我的小站，里面拥有无数你想不到的好东西</p>
						</div>
		                </div>
					</div>

						<div class="portfolio company mix_all" data-cat="company" style="display: inline-block; opacity: 1;">
						<div class="portfolio-wrapper ">
							<a href="single.html">
						     <img class="img-responsive" src="images/pi3.jpg" alt=""  />

						</a>
							<div class="gir">
							<h5>机械城</h5>
							<p>本公司主要研发智能机器人，智能家电</p>
						</div>
		                </div>
					</div>
					<div class="portfolio other mix_all" data-cat="other" style="display: inline-block; opacity: 1;">
						<div class="portfolio-wrapper ">
							<a href="single.html">
						     <img class="img-responsive" src="images/pi4.jpg" alt=""  />

						</a>
							<div class="gir">
							<h5>时装</h5>
							<p>本店有最新最潮时装，欢迎选购</p>
						</div>
		                </div>
					</div>
					<div class="portfolio is mix_all" data-cat="is" style="display: inline-block; opacity: 1;">
						<div class="portfolio-wrapper">
							<a href="single.html">
						     <img class="img-responsive" src="images/pi5.jpg" alt=""  />


						</a>
						<div class="gir">
							<h5>雨云</h5>
							<p>创意小屋，接各种单子定做创意物品</p>
						</div>
		                </div>
					</div>
					<div class="portfolio is mix_all" data-cat="is" style="display: inline-block; opacity: 1;">
						<div class="portfolio-wrapper">
							<a href="single.html">
						     <img class="img-responsive" src="images/pi6.jpg" alt=""  />

						</a>
						<div class="gir">
							<h5>高尔夫俱乐部</h5>
							<p>本俱乐部收人了，现在入会一律五折</p>
						</div>
		                </div>
					</div>
					<div class="portfolio is mix_all" data-cat="is" style="display: inline-block; opacity: 1;">
						<div class="portfolio-wrapper">
							<a href="single.html">
						     <img class="img-responsive" src="images/pi7.jpg" alt=""  />

						</a>
							<div class="gir">
							<h5>彩笔</h5>
							<p>出售265色彩色铅笔</p>
						</div>
		                </div>
					</div>
					<div class="clearfix"> </div>
					</div>
			<!-- Script for gallery Here -->
				<script type="text/javascript" src="js/jquery.mixitup.min.js"></script>
					<script type="text/javascript">
					$(function () {

						var filterList = {

							init: function () {

								// MixItUp plugin
								// http://mixitup.io
								$('#portfoliolist').mixitup({
									targetSelector: '.portfolio',
									filterSelector: '.filter',
									effects: ['fade'],
									easing: 'snap',
									// call the hover effect
									onMixEnd: filterList.hoverEffect()
								});

							},

							hoverEffect: function () {

								// Simple parallax effect
								$('#portfoliolist .portfolio').hover(
									function () {
										$(this).find('.label').stop().animate({bottom: 0}, 200, 'easeOutQuad');
										$(this).find('img').stop().animate({top: -30}, 500, 'easeOutQuad');
									},
									function () {
										$(this).find('.label').stop().animate({bottom: -40}, 200, 'easeInQuad');
										$(this).find('img').stop().animate({top: 0}, 300, 'easeOutQuad');
									}
								);

							}

						};

						// Run the show!
						filterList.init();
					});
					</script>
			<!-- Gallery Script Ends -->
			<div class="about">
				<h3>About Me</h3>
				<div class="col-md-8 dem">
				<h4>My name is sunsky zhao</h4>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer arcu sapien, ultrices non volutpat id, consectetur vitae dolor. Pellentesque sagittis facilisis sapien tristique consequat. Mauris ut felis sed neque pharetra tempor. Sed egestas venenatis malesuada. Donec vitae purus libero. Nullam fermentum lectus quis enim auctor pharetra. Donec semper tellus quis nisi porttitor posuere. Cras aliquam nulla eget ipsum tristique sit amet aliquet libero sollicitudin. Cras quis cursus eros. </p>
				<div class="call">
					<ul class=" call-in">
						<li><i> </i></li>
						<li><span>0 (888) 888 88 00</span></li>
						<li><a href="#"><i class="facebook"> </i></a></li>
						<li><a href="#"><i class="tin"> </i></a></li>
						<li><a href="#"><i class="gmail"> </i></a></li>
						<li><a href="#"><i class="dribble"> </i></a></li>
						<li><a href="#"><i class="browser"> </i></a></li>
					</ul>
				</div>
				<div class="clearfix"> </div>
				</div>
				<div class="col-md-4 men">
				<img class="img-responsive" src="images/ab.png" alt=""  />
				</div>
				<div class="clearfix"> </div>
			</div>
			</div>
		</div>
		<!---->
		<div class="footer">
			<div class="container">
			<p class="footer-class">Copyright © 2015 Portfolic Template by  <a href="http://w3layouts.com/" target="_blank">W3layouts</a></p>
			</div>
		 <script type="text/javascript">
						$(document).ready(function() {
							/*
							var defaults = {
					  			containerID: 'toTop', // fading element id
								containerHoverID: 'toTopHover', // fading element hover id
								scrollSpeed: 1200,
								easingType: 'linear'
					 		};
							*/

							$().UItoTop({ easingType: 'easeOutQuart' });

						});
					</script>
				<a href="#" id="toTop" style="display: block;"> <span id="toTopHover" style="opacity: 1;"> </span></a>

		</div>

</body>
</html>